﻿@{
    ViewBag.Title = "登陆页";
    Layout = null;
}

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>登陆</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- basic styles -->

    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        body {
            position: relative;
            margin: 0;
            padding: 0;
        }

        .header {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 99;
            top: 0;
            height: 60px;
            background: rgba(10, 10, 10, 0.8);
        }

        .footer {
            height: 46px;
            line-height: 46px;
            bottom: 0;
            text-align: center;
            color: #fff;
            font-size: 12px;
            background: rgba(10, 10, 10, 0.8);
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 99;
            border-top: 1px solid #e8e8e8;
            padding: 15px 0;
        }

        .loginWraper {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
            background: url(../images/loginbg.jpg) center no-repeat;
        }

        .loginBox {
            position: absolute;
            width: 400px;
            height: 280px;
            background: rgba(0, 60, 0, 0.4);
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -150px;
            border-radius: 10px;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.5);
        }

        input[type=text],
        input[type=password] {
            border: 0;
            height: 30px;
            width: 180px;
            padding-left: 12px;
        }

        .loginBox .row {
            box-sizing: border-box;
            margin-top: 10px;
            margin-left: 82px;
        }

        .btn {
            padding: 5px 28px;
            margin: 0 12px;
            background: #ffffff;
            border: 0;
            color: #568878;
            cursor: pointer;
        }

        .logintitle {
            font-size: 18px;
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            margin-bottom: 40px;
        }

        .headerlogo {
            line-height: 60px;
            margin-left: 50px;
            font-size: 24px;
        }

        #yzm { /*验证码<div>*/
            position: relative;
            background-color: #48809a;
            z-index: 999;
            left: 130px;
            top: -29px;
            width: 70px;
            height: 28px;
            color: #1a262f;
            font-size: medium;
            text-align:center;
        }
    </style>
    <title>后台登陆</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>

<body style="color:#ffffff;">
    <div class="header"><div class="headerlogo">大学生信贷管理</div></div>
    <div class="loginWraper">
        <div id="loginform" class="loginBox">
            @using (Html.BeginForm("LoginCheck", "Home", FormMethod.Post))
            {

            }

        <form method="post" id="form1" action="/Home/LoginCheck">
            <div class="logintitle">请登陆</div>
            <div class="row">
                <label style="vertical-align: middle;"><img src="../images/account.png" /></label>
                <input id="" name="txtUserAccount" type="text" placeholder="账户" class="input-text size-L">
            </div>
            <div class="row">
                <label style="vertical-align: middle;"><img src="../images/password.png" /></label>
                <input id="" name="txtUserPassword" type="password" placeholder="密码" class="input-text size-L">
            </div>
            <div class="row">
                <label style="vertical-align: middle;"><img src="../images/account.png" /></label>
                <input placeholder="输入验证码" type="text" id="in1" maxlength="24" onblur="" onfocus="getyzm()" style="width:100px;" /><div id="yzm" placeholder="" onclick="getyzm()">12v3gb</div>
            </div>
            <div id="Errortxt" style="color:darkred; margin-top: -20px;text-align: center;">@ViewBag.err</div>
            <div class="row" style="margin-top:0px;margin-left:0;text-align: center;">
                <input style="width: 100px; height: 35px;" name="" type="button" class="btn" value="登陆" onclick="text()">
            </div>
        </form>
        </div>
    </div>
    <div class="footer">Copyright</div>

    <script src="~/Scripts/jquery-1.11.3.min.js"></script>
    <script src="~/Scripts/jquery.easyui-1.4.5.min.js"></script>
    <script src="~/Scripts/jquery.edatagrid.js" type="text/javascript"></script>
    <!-- basic styles -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
    <!-- ace styles -->
    <link href="~/Content/css/ace.min.css" rel="stylesheet" />
    <link href="~/Content/css/ace-rtl.min.css" rel="stylesheet" />
    <link href="~/Content/css/ace-skins.min.css" rel="stylesheet" />
    <link href="~/Content/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.0.3.min.js"></script>
    <script src="~/Scripts/jquery.easyui-1.4.5.min.js"></script>

    <script type="text/javascript">

        function text() {
            var yzm = document.getElementById("yzm").innerHTML;//图片上的验证码
            var in1 = document.getElementById("in1").value.toUpperCase();//用户输入的验证码
            if (yzm != in1) {
                $("#Errortxt").html("验证码错误!");
            } else {
              $("#Errortxt").css("color", "#008b0b");
              $("#Errortxt").html("验证码输入正确!");
              $('#form1').submit();
            }
        }
        
        /*验证码*/
        function getyzm() {
            var code;
            function createCode() {
                code = '';
                var codeLength = 6;
                var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
                for (var i = 0; i < codeLength; i++) {
                    var index = Math.floor(Math.random() * 36);
                    code += random[index];
                }
                document.getElementById("yzm").innerHTML = code;
            }
            createCode();
        }

    </script>
</body>
</html>

